<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新东方顶部导航菜单</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#d #d1{
				background-color:#eeeeee;
				border-bottom:1px dotted #d3d3d3  ;
			}
			#d #d1 #u1{
				list-style: none;
				float: right;
			}
			#d #d1 #u1>li{
				float: left;
				margin: 5px;
				margin-right: 60px;
				border-right:1px solid #d3d3d3 ;
				padding-right:60px ;
			}
			#d #d1 #u1>li:nth-of-type(6){
				border-right:none ;
				position: relative;
			}
			#d #d1 #img1{
				margin-left: 10px;
			}
			#d #d1 #u1>li:nth-of-type(6) #d2{
				width: 200px;
				position: absolute;
				top: 25px;
				left: -120px;
				border:1px solid grey;
				display: none;
			} 
			#d #d1 #u1>li:nth-of-type(6):hover #d2{
				display: block;
			}
			#d #d1 #u1>li:hover{
				color: blue;
			}
			#d #d1 #u1>li:nth-of-type(6) #img2{
				position: absolute;
				top: 5px;
				left: 70px;
				display: none;
			}
			#d #d1 #u1>li:nth-of-type(6):hover #img2{
				display: block;
			}
			#d #d1 #u1>li:nth-of-type(6) #d2 .u2{
				list-style: none;
				margin: 10px;
				border-bottom:1px solid #878787 ;
			}
			.u2:after{
				content: '';
				display: block;
				clear: both;
			}
			#d #d1 #u1>li:nth-of-type(6) #d2 .u2 li{
				float: left;
				margin: 5px;
			}
			#d #d1 #u1>li:nth-of-type(6) #d2 .u2 li a{
				text-decoration: none;
				color: #878787;
			}
			#d #d1 #u1>li:nth-of-type(6) #d2 .u2 li a:hover{
				color: red
			}
			
		</style>
	</head>
	<body>
		<div id="d">
			<div id="d1">
				<img src="../img/logo.gif" id="img1" />
				<ul id="u1">
					<li>购物车</li>
					<li>优惠券</li>
					<li>快速注卡</li>
					<li>各地购课</li>
					<li>手机报</li>
					<li>
						网站导航
						<img id="img2" src="../img/open_icon.gif"/>
						<div id="d2">
							<ul class="u2">
								<li><a href="">托福</a></li>
								<li><a href="">雅思</a></li>
								<li><a href="">考研</a></li>
								<li><a href="">职称英语</a></li>
								<li><a href="">初中</a></li>
								<li><a href="">日语</a></li>
							</ul>
							<ul class="u2">
								<li><a href="">网络课堂</a></li>
								<li><a href="">资讯中心</a></li>
								<li><a href="">知识堂</a></li>
								<li><a href="">大师讲坛</a></li>
								<li><a href="">学习论坛</a></li>
								<li><a href="">学词</a></li>
								<li><a href="">考研搜校</a></li>
							</ul>
							<ul class="u2">
								<li><a href="">M-Zone</a></li>
								<li><a href="">手机报</a></li>
								<li><a href="">时时英语</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>